<template>
  <div>
    <div  style="background-color: #386582" >
    <el-row style="height: 60px" class="el-header-row">
      <el-col span='2' v-show="!login" ><a href="javascript:void(0)" @click="goToLogin"> 登录</a></el-col>
      <el-col span='4' v-show="login" style="color: white"> 欢迎回来,{{this.nickName}}</el-col>
      <el-col span='4'><a href="javascript:void(0)" @click="logout()" v-show="login">退出登录</a></el-col>
      <el-col span='2' v-show="!login"><a href="javascript:void(0)" @click="goToReg"> 注册</a></el-col>
      <el-col span='3' style="float: right;color: #cccccc;font-size: 18px"><a  href="javascript:void(0)" @click="goToOrder">我的订单</a></el-col>
      <el-col span='3' style="float: right;color: #cccccc;font-size: 18px" ><a href="javascript:void(0)" @click="goToCommunity">社区中心</a></el-col>
      <el-col span='3' style="float: right;color: #cccccc;font-size: 18px" ><a href="/personal/userInfo" >我的鹿途</a></el-col>
      <el-col span='3' style="float: right;color: #cccccc;font-size: 18px" ><a href="/" >首页</a></el-col>

    </el-row>
  </div>
    <div  style="height: 100px;width: 1200px;margin: 0 auto">
    <el-row gutter="20" style="margin-top: 20px">
      <el-col span="2" offset="2">
        <a href="/" style="font-size: 36px;margin: 0; padding: 0;float: right">
          <img :src="logo" style="width: 50px;height: 50px">
        </a>
      </el-col>
      <el-col span="3" style="margin: 0 auto">
        <span style="color: #278996;font-size: 30px;text-align: center;float: left">鹿途网</span>

      </el-col>
      <el-col span="10" offset="1">
        <el-input placeholder="请输入内容"  class="input-with-select">
          <el-select v-model="select"  slot="prepend" placeholder="请选择" >
            <el-option :key="index" v-for="(type,index) in typeArr" :value="index" :label="type"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </el-col>
      <el-col span="4">
        <div style="font-size: 12px;margin: 0 auto">
          <p style="margin: 0">服务热线 9:00-17:00</p>
          <p style="margin: 0;font-weight: bold;font-size: 16px">400  679  6699</p>
        </div>
      </el-col>
    </el-row>
    </div>
    <div>


    </div>
  </div>
</template>

<script>
import Community from "@/views/community/CommunityView";
export default {
  name: "IndexHeader",
  components: {
    Community,
  },
  data: function () {
    return {
      logo:'https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/logo%2Flutu.png',
      login: '',
      user: localStorage.getItem('userName'),
      nickName: localStorage.getItem('nickName'),
      select: '',
      typeArr: ["酒店", "景区", "旅游产品", "攻略"],

    }
  },
  methods: {
    goToAdmin(){
      this.$router.push("/admin")
    },
    goToMyLutu(){
      if (location.href == 'http://localhost:9090/personal/userInfo') {
        location.reload();
        return;
      }
      if(localStorage.getItem('id')==null){
        this.$message.error("您未登录，请登录后再试！")
        return;
      }
      this.$router.push('/personal/userInfo');
    },
    goToOrder() {
      if (location.href == 'http://localhost:9090/order') {
        location.reload();
        return;
      }
      if(localStorage.getItem('id')==null){
        this.$message.error("您未登录，请登录后再试！")
        return;
      }
      this.$router.push('/order');
    },
    logout() {
      if (confirm("您确认退出登录吗?")) {
        //发请求退出登录
        this.axios.post("http://localhost:8080/v1/users/logout").then(() => {
          localStorage.clear();//清空登录成功时保存的数据
          location.href = "/";
        })
      }
    },
    search() {
    },
    goToCommunity() {
      if (location.href == 'http://localhost:9090/community/all') {
        location.reload();
        return;
      }
      this.$router.push('/community');
    },
    goToLogin() {
      if (location.href == 'http://localhost:9090/login') {
        location.reload();
        return;
      }
      this.$router.push('/login');
    },
    goToReg() {
      if (location.href == 'http://localhost:9090/reg') {
        location.reload();
        return;
      }
      this.$router.push('/reg');
    },
  },
  created: function () {


    let jwt = localStorage.getItem("localJwt")
    if (jwt == null){
      if(this.$router.currentRoute.path.concat("/reg","/login","/","/index")){
              return
          }else{
        this.$message.error("您未登录，请先登录账户！")
        this.$router.push("/login")
      }
    }else{
      const decodedToken = this.jwt_decode(jwt);
      const exTime = decodedToken.exp;
      const currentTime = Math.floor(Date.now() / 1000);
      const isExpired = exTime > currentTime;
      this.login = isExpired;
      if (!isExpired && !this.$router.currentRoute.path.concat('login','/','/index','/reg')) {
        this.$router.push('/login')
      }
    }




  }
}
</script>

<style>
.el-header-row{
  width: 1200px;margin: 0 auto; line-height: 60px;;
}

.el-header-row a{text-decoration: none;font-size: 18px;text-align: center;color: #cccccc}
a:link{color:#cccccc}
a:hover{color: white}

.el-select .el-input {
  width: 110px;
}
</style>